<!-- 144 -->
<template>
	<div class="page-wrap">
		<a-space class="common-button-group">
			<a-button
				type="primary"
				:loading="searchBtnLoading"
				@click="handleSearch"
				>{{ $t('common_query') }}</a-button
			>
		</a-space>
		<t-query-form
			layout="inline"
			group="viewMaterialV2"
      ref="queryForm"
			:rules="rules"
			:model="queryForm"
		>
			<a-form-item :label="$t('T9_shopId')" name="shopId">
				<a-select v-model:value="queryForm.shopId" :placeholder="$t('common_pleaseSelect')" class="select-width">
					<a-select-option
						v-for="item in options.shopIdList"
						:key="item.value"
						:value="item.value"
						>{{ item.label }}</a-select-option
					>
				</a-select>
			</a-form-item>
      <a-form-item :label="$t('T9_materialType')" name="materialType">
        <a-select v-model:value="queryForm.materialType" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
          <a-select-option v-for="item in options.materialTypeList" :key="item.value" :value="item.label">
          {{item.label}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('T9_materialId')" name="materialId">
        <a-input
          class="select-width"
					v-model:value="queryForm.materialId"
          allow-clear
					:placeholder="$t('common_pleaseEnter1')"
				/>
      </a-form-item>
      <a-form-item :label="$t('T9_productId')" name="productId">
				<a-select v-model:value="queryForm.productId" show-search allow-clear :placeholder="$t('common_pleaseSelect')"
        class="select-width"
        label-in-value
        @change="handleProductIdChange">
					<a-select-option
						v-for="item in options.productIdList"
						:key="item.productId"
            :product="item.productVersion"
						:value="item.productId"
						>{{ item.productId }}</a-select-option
					>
				</a-select>
        <a-input
          class="select-width"
					v-model:value="productVersion"
          :disabled="true"
				/>
			</a-form-item>
      <a-form-item :label="$t('T9_partNo')" name="partNo">
				<a-select v-model:value="queryForm.partNo" show-search allow-clear :placeholder="$t('common_pleaseSelect')" class="select-width">
					<a-select-option
						v-for="item in options.partNoList"
						:key="item.value"
						:value="item.value"
						>{{ item.label }}</a-select-option
					>
				</a-select>
			</a-form-item>
		</t-query-form>
		<a-descriptions
			bordered
			:column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
		>
			<a-descriptions-item v-for="(val,key) in info" :key="key" :label="$t(`T9_${key}`)">
        {{val}}
      </a-descriptions-item>
		</a-descriptions>
    <div class="page-wrap-horizontal">
      <div class="page-wrap-horizontal-ltable">
        <a-row
          type="flex"
          justify="space-between"
          align="middle"
          class="global-oper-row mt-1"
        >
          <a-col :span="15" class="global-oper-row-title">{{
            $t('T9_bomList')
          }}</a-col>
          <a-col :span="8" class="global-oper-row-extra">
            <a-button>{{ $t('T9_toExcel') }}</a-button>
          </a-col>
        </a-row>
        <t-table :loading="list.tableLoading1" :data="list.bomList">
          <t-column field="productId" :title="$t('T9_productId')" />
          <t-column field="type" :title="$t('T9_type')" />
          <t-column field="partNo" :title="$t('T9_partNo')" />
          <t-column field="desc" :title="$t('T9_desc')" />
          <t-column field="materialfactoryname" :title="$t('T9_materialfactoryname')" />
          <t-column field="qty" :title="$t('T9_qty')" />
        </t-table>
      </div>
      <div class="page-wrap-horizontal-rtable">
        <a-row
          type="flex"
          justify="space-between"
          align="middle"
          class="global-oper-row mt-1"
        >
          <a-col :span="15" class="global-oper-row-title">{{
            $t('T9_materialHistory')
          }}</a-col>
          <a-col :span="8" class="global-oper-row-extra">
            <a-button>{{ $t('T9_toExcel') }}</a-button>
          </a-col>
        </a-row>
        <t-table :loading="list.tableLoading2" :data="list.materialHistoryList">
          <t-column field="eventTime" :title="$t('T9_eventTime')" />
          <t-column field="eventName" :title="$t('T9_eventName')" />
          <t-column field="eventUser" :title="$t('T9_eventUser')" />
          <t-column field="currentQty" :title="$t('T9_currentQty')" />
          <t-column field="materialLocationName" :title="$t('T9_materialLocationName')" />
          <t-column field="state" :title="$t('T9_state')" />
          <t-column field="holdState" :title="$t('T9_holdState')" />
        </t-table>
      </div>
    </div>
	</div>
</template>

<script>
  import { defineComponent } from 'vue'
  import * as api from '@/api/common'
  import { shopIdList } from '@/views/options'
  import initOptionsMixin from '@/mixins/initOptionsMixin'

  export default defineComponent({
    name: 'ViewMaterialV2',
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        info: {
          partNo: '',
          desc: '',
          activeState: '',
          location: '',
          state: ''
        },
        list: {
          tableLoading1: false,
          tableLoading2: false,
          bomList: [],
          materialHistoryList: []
        },
        queryForm: {
          shopId: undefined,
          materialId: '',
          materialType: undefined,
          productId: undefined,
          partNo: undefined
        },
        options: {
          shopIdList,
          materialTypeList: [],
          productIdList: [],
          partNoList: []
        },
        rules: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          materialType: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ]
        }
      }
    },
    watch: {

    },
    created() {
      this.initOptions([
        { name: 'materialType', params: null }
        /* { name: 'productId', params: { shopId: '', productType: '' } },
			{ name: 'partNo', params: { shopId: '' } } */
      ])
    },
    methods: {
      getBomList() {
        const basicParams = {
          dtoName: 'BomListDTO',
          queryId: 'GetConsumableSpecList',
          version: '80004',
          menuName: 'viewMaterialRelationShip',
          usage: 'queryBomList'
        }
        const params = { ...this.queryForm, ...basicParams }
        this.list.tableLoading1 = true
        return api
          .getList(params)
          .then((res) => {
            this.list.bomList = res || []
            this.list.tableLoading1 = false
          })
          .catch((error) => {
            this.list.tableLoading1 = false
            console.error(error)
          })
      },
      getMaterialHistoryList() {
        const basicParams = {
          dtoName: 'MaterialHistoryListDTO',
          queryId: 'GetConsumableHistory',
          version: '80002',
          menuName: 'viewMaterialRelationShip',
          usage: 'queryMaterialHistoryList'
        }
        const params = { ...this.queryForm, ...basicParams }
        this.list.tableLoading1 = false
        return api
          .getList(params)
          .then((res) => {
            this.list.materialHistoryList = res || []
            this.list.tableLoading2 = false
          })
          .catch((error) => {
            this.list.tableLoading2 = false
            console.error(error)
          })
      },
      getInfo() {
        const basicParams = {
          ...this.queryForm,
          dtoName: 'ViewMaterialV2InformationDTO',
          menuName: 'viewMaterialRelationShip',
          usage: 'queryInformation'
        }
        const params1 = {
          ...basicParams,
          ...{
            queryId: 'GetConsumableSpecInfo',
            version: '80001'
          }
        }
        const params2 = {
          ...basicParams,
          ...{
            queryId: 'GetMaterialList',
            version: '80002'
          }
        }
        api
          .getList(params1)
          .then((res) => {
            this.info.activeState = res.activeState
            this.info.desc = res.desc
            this.info.partNo = res.partNo
          })
          .catch((error) => {
            console.error(error)
          })
        return api
          .getList(params2)
          .then((res) => {
            this.info.location = res.location
            this.info.state = res.state
          })
          .catch((error) => {
            console.error(error)
          })
      },
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            Promise.all([
              this.getInfo(),
              this.getBomList(),
              this.getMaterialHistoryList()
            ]).then(() => { this.searchBtnLoading = false })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  })
</script>
<style lang='less' scoped>
.select-width {
	width: 120px;
}
</style>
